<!DOCTYPE html>
<html>
  <head>
  	<style type="text/css">
  		.box, .box {
  			border: 1px solid #CCC;
				width: 150px;
				height: 150px;
				float: left;
				margin: 10px;
  		}
			
			.element {
				background-color: #CCCCCC;
				margin: 5px;
				padding: 3px
			}
  	</style>
		
		<script type="text/javascript">
			function dragStart(event) {
				event.dataTransfer.effectAllowed = 'move';
				event.dataTransfer.setData("Text", event.target.getAttribute('id'));
			}
			
			function dragOver(event) {
				return false;
			}
			function action_group(text) {
			alert(text);
			}
			
			function drop(event) {
				var element = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(element));
				event.stopPropagation();
				return false;
			}
			
			
		</script>
  </head>
	<body>
		<div>Membres du groupe</div>
		
		<div id="liste_membre" class="box" ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="action_group('Un membre'); return drop(event);">
			<div id="first" class="element" draggable="true">
				Un !
			</div>
			<div id="second" class="element" draggable="true">
				Deux !
			</div>
			<div id="third" class="element" draggable="true">
				Trois !
			</div>
		</div>
		<div>Non membre</div>
		<div id="non_membre" class="box" ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="action_group('Non membre'); return drop(event);">
			
		</div>
		
	</body>
</html>